<script>
import {  complainAppealDetail } from '@/api/customer'
// import { getList } from '@/api/salesCenter/businessConver.js'

// import { dictAddType, dictJoinGroupType, dictTrackState } from '@/utils/dictionary'
// import InfoTab from './customer/infoTab.vue'
// import record from './customer/record'

export default {
  name: 'CustomerDetail',
  // components: { InfoTab, record },
  data() {
    return {
      datePickerVisible: false,
      customer: {
        // weFlowerCustomerRels: [{}]
      },
      birthday: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      // dictAddType,
      // dictJoinGroupType,
      // dictTrackState,

      active: '0',
      // openedTabs: ['0'],
      lastSyncTime: null,
      openTrack: ['0'],
      trajectoryType: {
        0: '全部',
        1: '客户动态',
        2: '员工动态',
        3: '互动动态',
        4: '商机阶段',
      },
      ssObj: []
    }
  },
  created() {
    // dictAddType.then((res) => (this.dictAddType = res))
    this.getDetail()
    // this.getStage()
  },
  methods: {
    // getStage() {
    //   getList().then((res) => {
    //     this.stageList = res.data
    //   })
    // },
    setValue(data) {
      let str = ''
      this.stageList.forEach((dd) => {
        if (dd.stageVal == data) {
          str = dd.stageKey
        }
      })
      return str
    },
    // updateBirthday() {
    //   if (!this.birthday || this.birthday == this.customer.birthday) {
    //     return
    //   }
    //   let data = {
    //     externalUserid: this.customer.externalUserid,
    //     birthday: this.birthday,
    //     firstUserId: this.customer.firstUserId
    //   }
    //   updateBirthday(data).then((response) => {
    //     this.msgSuccess('操作成功')
    //     // this.getDetail()
    //     this.customer['birthday'] = this.birthday
    //     // this.datePickerVisible = false
    //   })
    // },
    /**
     *客户详情基础(基础信息+社交关系)
     * @param {*}
     * externalUserid	是	当前客户id
     * userId	是	当前跟进人id
     */
    getDetail() {
      // getDetail({ ...this.$route.query, delFlag: this.$route.query.isDelete ? 1 : 0 }).then(({ data }) => {
      //   data.companyTags && (data.companyTags = data.companyTags.split(','))
      //   this.customer = data

      //   // if (data.trackUsers && data.trackUsers.length === 1) {
      //   //   this.openedTabs = [data.trackUsers[0].trackUserId]
      //   // }
      //   this.birthday = data.birthday
      // })
      console.log('this.$route.complainId = ', this.$route.query.id)
      let params = {}
      params.complainId = this.$route.query.id
      complainAppealDetail(params)
        .then((res) => {
          console.log('用户投诉列表 = ', res)
          this.ssObj.push(res.data)
        })
        .catch(() => {
          this.loading = false
        })
        
    },
    // changeTab(tab) {
    //   this.openedTabs.includes(tab.paneName) || this.openedTabs.push(tab.paneName)
    // },

    // remark(item) {
    //   return (
    //     item.remark ||
    //     this.customer.customerName + (item.remarkCorpName ? '-' + item.remarkCorpName : '')
    //   )
    // }
    changeTrack(type) {
      this.openTrack.includes(type) || this.openTrack.push(type)
      this.active = type
    },
    sync() {
      this.$refs['record'][this.active].sync()
    },
  },
}
</script>

<template>
  <div>
    <!-- <el-button slot="append" circle icon="el-icon-back" @click="$router.back()"></el-button>返回 -->
    <!-- <div class="g-card flex aic mb20">
      <el-image class="avatar" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"></el-image>
      <div class="ml10">
        <div>
          申诉人

        </div>
        <div class="mt10">
          <span :style="{ color: customer.customerType === 1 ? '#4bde03' : '#f9a90b' }">
            {{ { 1: '@微信', 2: '@企业微信' }[customer.customerType] }}
          </span>
        </div>
        <div class="mt10 gap10">
          <div>小柯</div>
        </div>
      </div>

    </div> -->
    <div class="flex">
      <div style="width: calc(100%); padding-right: var(--card-margin)">
        <div class="g-card">
          <div class="g-card-title">申诉信息</div>
          <el-table :data="ssObj">
                <el-table-column label="申诉人" align="center" prop="appealUserName" />
                <el-table-column label="姓名" align="center" prop="name" />
                <el-table-column label="手机号" align="center" prop="phone" />
                <el-table-column label="身份证号" align="center" prop="cardNo" />
                
              </el-table>

              <el-table :data="ssObj">
                <el-table-column label="手持身份证" align="center" prop="cardHandPath" >
                  <template #default="{ row }">
                    <el-image :src="row.cardHandPath" class="code-image" fit="fill"></el-image>
                  </template>
                </el-table-column>
              </el-table>
        </div>

      </div>
    </div>

  </div>
</template>

<style lang="scss" scoped>
.avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--border-radius-big);
  flex: none;
}
.avatar1 {
  width: 300px;
  height: 300px;
  border-radius: var(--border-radius-big);
  flex: none;
}
.info-wrap {
  margin-left: 20px;
  .info {
    color: var(--font-black-7);
    line-height: 32px;
  }
}

.el-icon-s-custom {
  font-size: 16px;
  margin-left: 4px;
  color: var(--font-black-6);
  &.man {
    color: #13a2e8;
  }
  &.woman {
    color: #f753b2;
  }
}
.g-card-title {
  margin-bottom: 5px;
}
.track-tab-wrap {
  .track-tab {
    background: var(--bg-black-8);
    border-radius: 50px;
    padding: 5px 10px;
    cursor: pointer;
    & + .track-tab {
      margin-left: 10px;
    }
    &.active {
      background: var(--color);
      color: var(--font-white, #fff);
    }
  }
}

.code-image {
  width: 600px;
  height: 400px;
}
</style>
